<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="/struts-tags" prefix="s"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib tagdir="/WEB-INF/tags" prefix="tag"%>
<s:set var="user_role" value="%{#session.USER_ROLE}" />
<s:set var="user_info" value="%{#session.USER_INFO}" />
<s:set var="LIST_CATEGORY" value="%{#request.LIST_CATEGORY}" />
<html>
<head>
<title>Category management</title>
<link href="css/bootstrap.css" rel="stylesheet" media="screen">

<link href="css/bootstrap-theme.css" rel="stylesheet" media="screen">
<link href="css/ace.min.css" rel="stylesheet" media="screen">
<link href="css/font-awesome.min.css" rel="stylesheet" />
<link href="css/jquery.tagsinput.css" rel="stylesheet" />
<link href="css/trung-style.css" rel="stylesheet" media="screen">
<link href='css/cupertino/jquery-ui.min.css' rel='stylesheet' />
<link href='fullcalendar/fullcalendar.css' rel='stylesheet' />
<link href='fullcalendar/fullcalendar.print.css' rel='stylesheet' media='print' />


<script src="js/jquery.min.js"></script>
<script src="js/jquery-1.9.0.min.js"></script>
<script src="js/jquery.tagsinput.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/ace.min.js"></script>
<script src="js/moment.js"></script>
<script src="js/daterangepicker.js"></script>
<script src='js/jquery-ui.custom.min.js'></script>
<script src='fullcalendar/fullcalendar.min.js'></script>
<script src='fullcalendar/lang/all.js'></script>
<script src='fullcalendar/lang/vi.js'></script>
<script src="http://localhost:8081/socket.io/socket.io.js"></script>
</head>
<s:if test="%{#user_role != 'Admin'}"><jsp:forward page="login.jsp"></jsp:forward></s:if>
<body>
	<div class="index">
		<!--header -->
		<tag:HeaderTag username="${user_info.fullname}">
			<div class="breadcrumbs" id="breadcrumbs" style="margin-bottom: 10px">
				<ul class="breadcrumb" style="margin: 8px;">
					<li><i class="icon-home home-icon"></i>
					<a href="./Index.do">Trang chủ</a></li>
					<li class="active">Quản lý thể loại</li>
				</ul>
				<!-- .breadcrumb -->
			</div>
		</tag:HeaderTag>
		<!--end header -->

		<!-- main body -->
		
		
		
		<tag:SideBarTag active_area="6" subMenuOpen="4"></tag:SideBarTag>
		<div class="main-content">
			<div class="page-header">
				<h1>Quản lý thể loại </h1>
			</div>
			<div class="page-content">
				<form action="CreateCategory.do" method="POST" id="CreateCategory" onsubmit="return submitCreateCategoryForm()">
					<table style="width: 400px;">
						<tbody>
							<tr>
								<td>Thêm thể loại: </td>
								<td><input type="text" class="form-control" 
									id="txtCategoryName" name="categoryName" placeholder="Nhập tên thể loại...">
								</td>
								<td>
									<button  type="submit" id="btn" class="btn btn-sm btn-success">Tạo</button>
								</td>
							</tr>
							<tr><td></td><td><div id="error-title" style="color:red"></div></td><td></td></tr>
						</tbody>
					</table>
				</form>
				<table class="table table-hover" style="text-align: center;">
					<tr class="active">
						<td><b>Stt</b></td>
						<td><b>Thể loại</b></td>
						<td><b>Số người theo dõi</b></td>
						<td><b>Trạng thái</b></td>
						<td></td>
					</tr>
					<tbody>
						<s:if test="%{#LIST_CATEGORY != null}">
						<s:iterator var="list_category" value="%{#LIST_CATEGORY}"
							status="index">
						
							<tr  id="${list_category.eventCategoryId}" <s:if test="%{#list_category.isActive.equals(true)}">class="success"</s:if><s:else>class="danger"</s:else>>
								<td>${index.index +1}</td>
								<td>
								<s:if test="%{#list_category.isActive.equals(false)}">
								<input type="text" disabled  id="${list_category.eventCategoryId}txt" style="width: 200px;"
										value="${list_category.eventCategoryName}">
										
								</s:if> <s:else>
								<input type="text"  onfocus="clickTextbox(${list_category.eventCategoryId})"  id="${list_category.eventCategoryId}txt" style="width: 200px;"
										value="${list_category.eventCategoryName}">
								</s:else>
									
								</td>
								<td>${list_category.countById} người</td>
								<td id="${list_category.eventCategoryId}td">
								<s:if test="%{#list_category.isActive.equals(true)}">
									Đang hoạt động
								</s:if> 
								<s:else>
									Không hoạt động
								</s:else>
								</td>
								<td>
									<s:if test="%{#list_category.isActive.equals(true)}">
										<c:set var="linkName" value="Khóa"/>
									</s:if> 
									<s:else>
										<c:set var="linkName" value="Mở"/>
									</s:else>
									<input type="button" onclick="activeCategory(${list_category.eventCategoryId},${list_category.isActive},this)" 
										value="${linkName}" style=" background:none!important;border:none;padding:0 12px 0 0 !important;color:blue" />
								
								<input type="button" onclick="updateCategory(${list_category.eventCategoryId},'${list_category.eventCategoryName}',this)" id="${list_category.eventCategoryId}Sua" hidden="hihdden" 
										value="Sửa" style=" background:none!important;border:none;padding:0 12px 0 0 !important;color:red" />
								<input type="button" onclick="ResetTextbox(${list_category.eventCategoryId},'${list_category.eventCategoryName}')" id="${list_category.eventCategoryId}Reset" hidden="hihdden" value="Reset" style=" background:none!important;border:none;padding:0!important;color:green" />
								</td>
							
							</tr>
						</s:iterator>
					
						</s:if>
						<s:else>
							<tr class="warning"><td colspan="5">Chưa có thể loại nào tồn tại! Xin hãy thêm mới...</td></tr>
						</s:else>
					</tbody>
				</table>
			</div>
			
		</div>
	</div>
</body>
<script type="text/javascript">
var global= 0 ;
	function submitCreateCategoryForm(){
		 var event_title = $('#txtCategoryName').val().replace(/\s/g, '');
		 var result = false;
		 if(event_title == ""){
			 document.getElementById('error-title').innerHTML="Tên thể loại không hợp lệ!";
			 result = false;
		 }	else{
			 
			 var name = document.getElementById('txtCategoryName').value;
			 $.ajax({
				    type: "post",
		            url: "CheckIsExist.do",
		            async : false,
		            data: { NameAjax: name},
		            success: function (data) {
		            	
		            	if(data == "true"){
		            		 document.getElementById('error-title').innerHTML="Thể loại đã tồn tại";
		            		 result = false;
		            	} else {
							result = true;
		            	}
		            },
		            error: function (data) {
		                alert("error");
		                result = false;
		            }
		        });
			 
		 } 
		 return result;
	}
	function activeCategory(Id, isActive,link){
		link.setAttribute("disabled", "disabled");
		$.ajax({
		    type: "post",
            url: "ActiveCategory.do",
            data: { isActive: isActive,categoryIDForActive:Id},
            success: function (data) {
            	link.removeAttribute("disabled");	
            	var tr =  document.getElementById(Id);
            	var td = document.getElementById(Id+"td");
            	var txt = document.getElementById(Id+"txt");
            	if(tr.getAttribute("class")== "danger"){	
            		link.value = "Khóa";
            		link.setAttribute("onclick","activeCategory("+ Id+",true,this)") ;
            		tr.setAttribute("class","success");
            		td.innerText = "Đang hoạt động";
            		txt.setAttribute("onfocus","clickTextbox("+Id +")");
            		txt.removeAttribute("disabled");
            	} else{
            		link.value = "Mở";
            		link.setAttribute("onclick","activeCategory("+ Id+",false,this)") ;
            		tr.setAttribute("class","danger");
            		td.innerText = "Không hoạt động";
            		txt.removeAttribute("onfocus");
            		txt.setAttribute("disabled","disabled")
            		document.getElementById(Id+"Sua").setAttribute("hidden","hidden");
        			document.getElementById(Id+"Reset").setAttribute("hidden","hidden");;
            	}
            },
            error: function (data) {
                alert("error");
            }
        });
	}
	
	function clickTextbox(Id){
		if(global == 0){
			document.getElementById(Id+"Sua").removeAttribute("hidden");	
			document.getElementById(Id+"Reset").removeAttribute("hidden");
			global = Id;
		} else{
			document.getElementById(global+"Sua").setAttribute("hidden","hidden");
			document.getElementById(global+"Reset").setAttribute("hidden","hidden");
			document.getElementById(Id+"Sua").removeAttribute("hidden");	
			document.getElementById(Id+"Reset").removeAttribute("hidden");
			global = Id;
		}			
	}
	function ResetTextbox(Id, name){
		var txt = document.getElementById(Id+"txt");
		txt.value= name;
	}
	function updateCategory(Id,oldName,link){
		var name = document.getElementById(Id+"txt").value.trim('');
		link.setAttribute("disabled", "disabled");
	if (name == ''){
		alert("Vui lòng nhập tên thể loại");
		link.removeAttribute("disabled");	
		var txt = document.getElementById(Id+"txt");
		txt.value= oldName;
		return false;
	}
	$.ajax({
	    type: "post",
	    async : false,
        url: "UpdateCategory.do",
        data: {idForUpdate: Id,nameForUpdate:name},
        success: function (data) {
        	link.removeAttribute("disabled");	
        	if(data == "true"){
        		alert("Thể loại đã tồn tại");
        		var txt = document.getElementById(Id+"txt");
        		txt.value= oldName;
        	}else{
        		document.getElementById(Id+"Sua").setAttribute("hidden","hidden");
    			document.getElementById(Id+"Reset").setAttribute("hidden","hidden");
    			document.getElementById(Id+"txt").value = data;
    			alert("Thay đổi thông tin thành công");
        	}
        	
        },
        error: function (data) {
            alert("error");
        }
    });
	}
		
</script>

</html>